<template>
	<div style="padding:20px">
		<div class="main">
			<h3 style="margin-bottom: 30px;">商品（Spu）介绍</h3>
			<!-- 商品（Spu）介绍 -->
			<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px">
				<el-form-item label="商品名称" prop="title" :label-width="formLabelWidth" :rules="[{ required: true, message: '商品名称不能为空哦', trigger: 'blur' }]">
					<el-input v-model="ruleForm.title" autocomplete="off" width="50px"></el-input>
				</el-form-item>

				<el-form-item label="原始价格" prop="originalPrice" :label-width="formLabelWidth" :rules="[{ required: true, message: '商品原价不能为空', trigger: 'blur' }]">
					<el-input v-model="ruleForm.originalPrice" autocomplete="off" width="50px">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>

				<el-form-item label="当前价格" prop="price" :label-width="formLabelWidth" :rules="[{ required: true, message: '商品现价不能为空', trigger: 'blur' }]">
					<el-input v-model="ruleForm.price" autocomplete="off" width="50px">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>

				<el-form-item label="VIP价格" prop="vipPrice" :label-width="formLabelWidth" :rules="[{ required: true, message: '商品ViP价格不能为空', trigger: 'blur' }]">
					<el-input v-model="ruleForm.vipPrice" autocomplete="off" width="50px">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>

				<el-form-item label="剩余库存" prop="stock" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.stock" autocomplete="off" width="50px" :disabled="true"></el-input>
				</el-form-item>

				<el-form-item label="运费模板" prop="freightTemplateId" :label-width="formLabelWidth">
					<el-select v-model="ruleForm.freightTemplateId" placeholder="请选择">
						<el-option v-for="item in tempData" :label="item.templateName" :key="item.id" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="是否在售" :label-width="formLabelWidth">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">在售</el-radio>
						<el-radio :label="2">下架</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="商品图片" prop="imgList" :label-width="formLabelWidth">
					<el-upload action="http://192.168.1.54:8081/upload/admin" list-type="picture-card" v-model="ruleForm.imgList" :on-success="handlePictureCardPreview" :limit="5" :file-list='fileList' :on-remove="handleRemove" >
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>

				<el-form-item label="商品单位" prop="unit" :label-width="formLabelWidth" :rules="[{ required: true, message: '物件单位不能为空', trigger: 'blur' }]">
					<el-input v-model="ruleForm.unit" autocomplete="off" width="50px" placeholder="件/个/盒">
					</el-input>
				</el-form-item>

				<el-form-item label="所属类目" prop="categoryId" :label-width="formLabelWidth">
					<el-cascader placeholder="请选择" v-model="ruleForm.categoryId" :options="options">
					</el-cascader>
				</el-form-item>

				<el-form-item label="商品简介" prop="description" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.description" autocomplete="off" width="50px">
					</el-input>
				</el-form-item>

				<el-form-item label="商品详细介绍" prop="detail" :label-width="formLabelWidth" @Change='hangler' :rules="[{ required: true, message: '请填写商品详情', trigger: 'blur' }]">
					<!-- <vue-editor v-model="ruleForm.detail"></vue-editor> -->
					<TinymceEditor v-model="ruleForm.detail" @change="change" @input="input"></TinymceEditor>
				</el-form-item>
			</el-form>
		</div>
		<!-- 商品类型 -->
		<div class="main">
			<h3 style="margin-bottom: 30px;">商品类型(sku)</h3>
			<el-button type="primary" plain @click="add">添加</el-button>
			<el-table :data="skuList" style="width: 100%">
				<el-table-column prop="barCode" label="sku首次" align="center">
				</el-table-column>
				<el-table-column prop="title" label="类型名" align="center">
				</el-table-column>
				<el-table-column prop="originalPrice" label="原价" align="center">
					<template slot-scope="scope">{{scope.row.originalPrice/100}}个</template>
				</el-table-column>
				<el-table-column prop="price" label="现价" align="center">
					<template slot-scope="scope">{{scope.row.price/100}}个</template>
				</el-table-column>
				<el-table-column prop="vipPrice" label="VIP价" align="center">
					<template slot-scope="scope">{{scope.row.vipPrice/100}}个</template>
				</el-table-column>
				<el-table-column prop="stock" label="库存" align="center">
					<template slot-scope="scope">{{scope.row.stock}}个</template>
				</el-table-column>
				<!--100-->
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" @click="handleDelete(scope.$index)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 商品参数  -->
		<div class="main">
			<h3 style="margin-bottom: 30px;">商品参数(sku)</h3>
			<el-button type="primary" @click="adds()" plain>添加</el-button>
			<el-table :data="attributeList" style="width: 100%">
				<el-table-column prop="attribute" label="商品参数名称" align="center"> </el-table-column>
				<el-table-column prop="value" label="商品参数值" align="center"> </el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="danger" @click="handleDeletesse(scope.$index)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-button @click="caqxer">取消</el-button>
			<el-button type="primary" @click="preseGood('ruleForm')" v-text="this.$route.query.id != undefined?'修改商品':'保存商品'"></el-button>
		</div>
		<!-- 添加商品类型弹窗 -->
		<el-dialog title="添加商品类型（Sku）" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :before-close="handleClose">
			<el-form status-icon ref="form" :model="form">
				<el-form-item label="类型条码" prop="barCode" :label-width="formlWidth" :rules="[{ required: true, message: '类型条码不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.barCode" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="类型名称" prop="title" :label-width="formlWidth" :rules="[{ required: true, message: '类型名称不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.title" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="图片(可空)" prop="img" :label-width="formlWidth">
					<el-upload class="avatar-uploader" action="http://192.168.1.54:8081/upload/admin" :show-file-list="false"
					 :on-success="handleAvatarSuccess">
						<img v-if="form.img" :src="form.img" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="原始价格" prop="originalPriceRaw" :label-width="formlWidth" :rules="[{ required: true, message: '类型原价不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.originalPriceRaw" placeholder="0.00" style="width: 50%">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="当前价格" prop="priceRaw" :label-width="formlWidth" :rules="[{ required: true, message: '类型现价不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.priceRaw" placeholder="0.00" style="width: 50%">
						<template slot="append">元</template></el-input>
				</el-form-item>
				<el-form-item label="VIP价格" prop="vipPriceRaw" :label-width="formlWidth" :rules="[{ required: true, message: '类型VIP价格不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.vipPriceRaw" placeholder="0.00" style="width: 50%">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="库存" prop="stock" :label-width="formlWidth" :rules="[{ required: true, message: '类型库存不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="form.stock" style="width: 50%"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="determine('from')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 设置商品参数弹窗 -->
		<el-dialog title="设置商品参数" :visible.sync="dialogVisible2" v-if="dialogVisible2" width="50%" :before-close="handleClose1">
			<el-form class="demo-ruleForm" label-width="100px" label-position="left" status-icon ref="role" :model="role">
				<el-form-item label="商品参数名称" prop="attribute" :rules="[{ required: true, message: '属性名称不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="role.attribute" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="商品参数值" prop="value" :rules="[{ required: true, message: '属性值不能为空', trigger: 'blur', }]">
					<el-input type="text" v-model="role.value" style="width: 50%"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="demla('role')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {Upsertaddupdate,UpserTdetail,UpserTemplate,UpsertSpous} from '../../api/goodslist.js'
	// import { VueEditor } from 'vue2-editor'
	import TinymceEditor from '../../assembly/TEditor.vue'
	// import TinymceEditor from '@tinymce/tinymce-vue'
	export default {
		components: {
			TinymceEditor
		},
		data() {
			return {
				tempData: [], // 运费模板
				options: [], // 商品类目
				skuList: [], // 商品类型
				attributeList: [], // 商品参数
				fileList: [],
				appraisePage: {},
				formLabelWidth: '150px',
				formlWidth: '100px',
				dialogVisible: false,
				dialogVisiblearn: false,
				dialogVisible2: false,
				role: {
					attribute: '',
					value: ''
				},
				form: { // 商品类型
					img: '',
					barCode: '',
					title: '',
					originalPriceRaw: '',
					priceRaw: '',
					vipPriceRaw: '',
					stock: '',
					id: '',
					spuId: ''
				},
				ruleForm: { // 商品（Spu）介绍
					title: '',
					originalPrice: '',
					price: '',
					vipPrice: '',
					unit: '',
					description: '',
					freightTemplateId: [],
					imgList: [],
					categoryId: [],
					detail: '',
					status: ''
				}
			}
		},
		methods: {
			change(item) {
				console.log('item :>> ', item, "4564564aaaa56")
			},
			input(item) {
				this.ruleForm.detail = item
			},
			// 保存商品
			preseGood(formName) {
				const that = this
				this.$refs[formName].validate((valid) => {
					// console.log(valid)
					if (!valid) {
						this.$message.error({
							type: 'info',
							message: '请完善以上表单信息'
						})
					} else if (this.skuList == '') {
						this.$message.error({
							type: 'info',
							message: '请添加商品类型'
						})
					} else if (this.ruleForm.detail == '') {
						this.$message.error({
							type: 'info',
							message: '请填写商品详情'
						})
					} else if (this.tempData == '') {
						this.$message.error({
							type: 'info',
							message: '请添加运费模板'
						})
					} else if (this.options == '') {
						this.$message.error({
							type: 'info',
							message: '请选择类目'
						})
					} else if (this.attributeList == '' && this.$route.query.id == undefined) {
						this.$message.error({
							type: 'info',
							message: '请添加商品参数'
						})
					} else if (this.ruleForm.imgList == '') {
						this.$message.error({
							type: 'info',
							message: '请上传至少一张图片'
						})
					} else if (valid) {
						const data = {
							...this.ruleForm,
							categoryId: this.ruleForm.categoryId[this.ruleForm.categoryId.length - 1],
							price: this.ruleForm.price * 100,
							originalPrice: this.ruleForm.originalPrice * 100,
							vipPrice: this.ruleForm.vipPrice * 100,
							img: this.form.img,
							attributeList: this.attributeList,
							skuList: this.skuList
						}
						const parmes = {
							_mt: this.$route.query.id != undefined ? 'edit' : 'create',
							spuDTO: JSON.stringify(Object.assign({}, this.appraisePage, data))
						}
						// console.log(parmes)
						Upsertaddupdate(parmes).then((response) => {
							if (response.data.errmsg == '成功') {
								this.$router.replace({
									path: '/goods/goodslist'
								})
								this.$message({
									type: 'success',
									message: '保存商品成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: response.data.errmsg
								})
							}
						})
					}
				})
			},
			// 取消添加
			caqxer() {
				this.$router.replace({
					path: '/goods/goodslist'
				})
			},
			hangler() {
				console.log(1111)
			},
			add() {
				this.dialogVisible = true
				this.form.img = ''
				this.form.barCode = ''
				this.form.title = ''
				this.form.originalPriceRaw = ''
				this.form.priceRaw = ''
				this.form.vipPriceRaw = ''
				this.form.stock = ''
			},
			// 添加商品类型
			determine() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.$route.query.id != undefined) {
							console.log('skuList :>> ', this.skuList)
							var arr = {
								img: this.form.img,
								barCode: this.form.barCode,
								title: this.form.title,
								originalPriceRaw: Number(this.form.originalPriceRaw),
								priceRaw: Number(this.form.priceRaw),
								vipPriceRaw: Number(this.form.vipPriceRaw),
								stock: Number(this.form.stock),
								price: this.form.priceRaw * 100,
								originalPrice: this.form.originalPriceRaw * 100,
								vipPrice: this.form.vipPriceRaw * 100,
								id: this.form.id,
								spuId: this.form.spuId
							}
							this.skuList.push(arr)
							// console.log('skuList1 :>> ', this.skuList)
						} else {
							var arr = {
								img: this.form.img,
								barCode: this.form.barCode,
								title: this.form.title,
								originalPriceRaw: Number(this.form.originalPriceRaw),
								priceRaw: Number(this.form.priceRaw),
								vipPriceRaw: Number(this.form.vipPriceRaw),
								stock: Number(this.form.stock),
								price: this.form.priceRaw * 100,
								originalPrice: this.form.originalPriceRaw * 100,
								vipPrice: this.form.vipPriceRaw * 100
							}
							this.skuList.push(arr)
						}
						this.dialogVisible = false
					}
				})
			},
			// 删除增加的表格数据
			handleDelete(index) {
				this.skuList.splice(index, 1)
			},
			handleDeletesse(index) {
				this.attributeList.splice(index, 1)
			},
			// 取消
			handleClose() {
				this.dialogVisible = false
				// this.$refs["role"].resetFields();
				this.$refs.form.resetFields()
			},
			// 设置商品参数
			adds() {
				this.dialogVisible2 = true
				this.role.attribute = ''
				this.role.value = ''
			},
			// 确认设置商品参数
			demla() {
				this.$refs.role.validate((valid) => {
					if (valid) {
						var arr = {
							attribute: this.role.attribute,
							value: this.role.value
						}
						this.attributeList.push(arr)
						this.dialogVisible2 = false
					}
				})
			},
			// 取消
			handleClose1() {
				this.dialogVisible2 = false
				this.$refs.role.resetFields()
			},
			// 所属类目
			list() {
				UpserTemplate().then((res) => {
					this.options = res.data.data
				})
			},
			// 运费模板 
			listst() {
				UpsertSpous().then((res) => {
					this.tempData = res.data.data.map(i => {
						return i.freightTemplateDO
					})
				})
			},
			// this.$message.error({
			// 	type: 'info',
			// 	message: '请上传至少一张图片'
			// })
			
			handleRemove(res, fileList) {
				// console.log(res)
				this.ruleForm.imgList.push(res.url)
				
			},
			// 上传照片墙
			handlePictureCardPreview(res, file) {
				// console.log(res)
				this.ruleForm.imgList.push(res.url)
				this.dialogVisiblearn = true
			},
			// 图片
			handleAvatarSuccess(res, file) {
				this.form.img = res.url
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			}
		},
		mounted() {
			if (this.$route.query.id != undefined) {
				UpserTdetail(this.$route.query.id).then((res) => {
					console.log('res :>> ', res)
					res.data.data.imgList.map(item => {
						this.fileList.push({
							url: item
						})
					})
					this.ruleForm = {
						...res.data.data
					}
					this.ruleForm.price = res.data.data.price / 100,
						this.ruleForm.originalPrice = res.data.data.originalPrice / 100,
						this.ruleForm.vipPrice = res.data.data.vipPrice / 100,

						this.appraisePage = res.data.data
					this.form.id = res.data.data.skuList.id
					// this.form.img = res.data.data.img,
					this.form.spuId = res.data.data.skuList.spuId
					this.attributeList = res.data.data.attributeList

					this.skuList = res.data.data.skuList
				})
			}
		},
		created() {
			this.list()
			this.listst()
		}
	}
</script>

<style scoped="scoped" lang="less">
	.main {
		padding: 20px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		color: #303133;
		transition: .3s;
		margin-bottom: 10px;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
